<!DOCTYPE HTML>
<html lang="en" >
    <!-- Start book Introduction -->
    <head>
        <!-- head:start -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>CSS3 | Introduction</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="gitbook/style.css">
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="./JS.html" />
    
    
    <link rel="prev" href="./html.html" />
    

        <!-- head:end -->
    </head>
    <body>
        <!-- body:start -->
        
    <div class="book"
        data-level="0.2"
        data-chapter-title="CSS3"
        data-filepath="css.md"
        data-basepath="."
        data-revision="Fri Sep 01 2017 14:50:33 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="./index.html">
                
                        <i class="fa fa-check"></i>
                        
                        web前端基础
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.1" data-path="html.html">
            
                
                    <a href="./html.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.</b>
                        
                        HTMl5
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="0.2" data-path="css.html">
            
                
                    <a href="./css.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.</b>
                        
                        CSS3
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="0.3" data-path="JS.html">
            
                
                    <a href="./JS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.</b>
                        
                        JavaScript
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1" data-path="section2/index.html">
            
            <span><b>1.</b> section 2</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="section2/example1.html">
            
            <span><b>1.1.</b> example 1</span>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="./" >Introduction</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h3 id="css3">CSS3</h3>
<p>7.24 <strong><em>CSS3</em></strong>  </p>
<table>
<thead>
<tr>
<th>&#x524D;&#x7F00;</th>
<th>&#x6D4F;&#x89C8;&#x5668;</th>
</tr>
</thead>
<tbody>
<tr>
<td>-webkit</td>
<td>chrome&#x548C;safari</td>
</tr>
<tr>
<td>-moz</td>
<td>firefox</td>
</tr>
<tr>
<td>-ms</td>
<td>IE</td>
</tr>
<tr>
<td>-o</td>
<td>opera</td>
</tr>
</tbody>
</table>
<h1 id="css&#x7684;www">css&#x7684;WWW</h1>
<ol>
<li>W(what)
&#x5C42;&#x53E0;&#x6837;&#x5F0F;&#x8868;&#xFF0C;&#x72B9;&#x5982;&#x4E00;&#x5C42;&#x5305;&#x88C5;&#x7EB8;&#xFF0C;&#x5305;&#x88F9;&#x5728;&#x76D2;&#x5B50;(Html&#x7ED3;&#x6784;)&#x4E0A;</li>
<li>W(why)
&#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;&#xFF0C;&#x66F4;&#x5F3A;&#x5927;&#x7684;&#x6837;&#x5F0F;&#x548C;&#x52A8;&#x753B;&#x529F;&#x80FD;&#xFF0C;&#x66F4;&#x5408;&#x7406;&#x7684;&#x4EE3;&#x7801;&#x7ED3;&#x6784;&#x90E8;&#x7F72;</li>
<li>W(where)
&#x5E38;&#x5E38;&#x914D;&#x5408;html&#xFF0C;&#x8FDB;&#x884C;&#x9875;&#x9762;&#x6837;&#x5F0F;&#x4E0A;&#x7684;&#x7F8E;&#x5316;&#xFF0C;&#x548C;&#x7ED3;&#x6784;&#x9875;&#x9762;&#x5185;&#x5E03;&#x5C40;&#xFF0C;&#x54EA;&#x91CC;&#x7528;&#x4E86;html&#xFF0C;&#x5C31;&#x80AF;&#x5B9A;&#x53EF;&#x4EE5;&#x770B;&#x5230;css</li>
</ol>
<h1 id="css&#x7684;&#x5F15;&#x5165;">CSS&#x7684;&#x5F15;&#x5165;</h1>
<ol>
<li>&#x884C;&#x5185;&#x5F15;&#x5165;(&#x9488;&#x5BF9;&#x5143;&#x7D20;)
&#x76F4;&#x63A5;&#x5728;&#x6807;&#x7B7E;&#x4E2D;&#x52A0;&#x4E0A;&quot;style&quot;&#x5C5E;&#x6027;<blockquote>
<p>&#x4F18;&#x70B9;&#x662F; &#x6BD4;&#x8F83;&#x76F4;&#x89C2;<br>
&#x7F3A;&#x70B9;&#x662F;&#x4E0D;&#x80FD;&#x91CD;&#x7528;&#xFF0C;&#x53EA;&#x9488;&#x5BF9;&#x5F53;&#x524D;&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x4E14;&#x4EE3;&#x7801;&#x7D0A;&#x4E71;&#xFF0C;html&#x4E2D;&#x5939;&#x6742;css&#x4EE3;&#x7801;</p>
<pre><code>&lt;div style=&quot;font-size: 20px;&quot;&gt;
 &#x6211;&#x662F;&#x4E00;&#x4E2A;&#x521D;&#x5B66;&#x8005;
&lt;/div&gt;
</code></pre></blockquote>
</li>
<li>&#x9875;&#x5185;&#x5F15;&#x5165;(&#x9488;&#x5BF9;&#x9875;&#x9762;)
&#x76F4;&#x63A5;&#x5728;&#x9875;&#x5934;&#x63D2;&#x5165;<style></style><blockquote>
<p>&#x4F18;&#x70B9;&#xFF1A;&#x53EF;&#x4EE5;&#x65B9;&#x4FBF;&#x7684;&#x63A7;&#x5236;&#x9875;&#x9762;&#x591A;&#x4E2A;&#x5143;&#x7D20;<br>
&#x7F3A;&#x70B9;&#xFF1A;&#x53EA;&#x80FD;&#x5C40;&#x9650;&#x4E8E;&#x63A7;&#x5236;&#x5F53;&#x524D;&#x9875;&#x9762;</p>
<pre><code>&lt;style&gt;
 div{
     color: blue;
 }
&lt;/style&gt;
</code></pre></blockquote>
</li>
<li>&#x9875;&#x5916;&#x5F15;&#x5165;(&#x9488;&#x5BF9;&#x591A;&#x9875;&#x9762;)
&#x901A;&#x8FC7;link&#x6807;&#x7B7E;&#x5F15;&#x5165;&#x5916;&#x90E8;CSS&#x6587;&#x4EF6;&#xFF0C;&#x8FBE;&#x5230;1&#x4E2A;css&#x6587;&#x4EF6;&#x63A7;&#x5236;&#x591A;&#x4E2A;html&#x9875;&#x9762;<blockquote>
<p>&#x4F18;&#x70B9;&#xFF1A;&#x65B9;&#x4FBF;&#x63A7;&#x5236;&#x591A;&#x4E2A;&#x9875;&#x9762;&#xFF0C;&#x7EDF;&#x4E00;&#x5168;&#x7AD9;&#x6837;&#x5F0F;&#xFF0C;&#x53EF;&#x4EE5;&#x88AB;&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;&#xFF0C;&#x52A0;&#x5FEB;&#x52A0;&#x8F7D;&#x901F;&#x5EA6;<br>
&#x7F3A;&#x70B9;&#xFF1A;&#x56E0;&#x4E3A;&#x6709;&#x7F13;&#x5B58;&#xFF0C;&#x6240;&#x4EE5;&#x6709;&#x53EF;&#x80FD;&#x5B58;&#x5728;&#x66F4;&#x65B0;&#x4E0D;&#x53CA;&#x65F6;</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/1.css&quot; /&gt;
</code></pre></blockquote>
</li>
<li><p>&#x4E09;&#x79CD;&#x5F15;&#x5165;&#x65B9;&#x5F0F;&#x7684;&#x4F18;&#x5148;&#x7EA7;&#x5BF9;&#x6BD4;</p>
<pre><code> &#x4F18;&#x5148;&#x7EA7;&#x4F9D;&#x6B21;&#x662F;&#xFF1A;&#x5C31;&#x8FD1;&#x539F;&#x5219;

 &#x884C;&#x5185;&#x5F15;&#x7528;    &gt; &#x9875;&#x5185;&#x5F15;&#x7528;    &gt; &#x9875;&#x5916;&#x5F15;&#x7528;
</code></pre></li>
</ol>
<h1 id="css&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;">CSS&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;</h1>
<ol>
<li>&#x901A;&#x914D;&#x9009;&#x62E9;&#x7B26;   <blockquote>
<p>   *{}</p>
</blockquote>
</li>
<li>&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;   <blockquote>
<p>   div{}</p>
</blockquote>
</li>
<li>&#x7FA4;&#x7EC4;&#x9009;&#x62E9;&#x7B26;   <blockquote>
<p>   h1,h2,h3,p{}</p>
</blockquote>
</li>
<li>&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x7B26;   </li>
</ol>
<table>
<thead>
<tr>
<th>&#x9009;&#x62E9;&#x7B26;</th>
<th>&#x540D;&#x79F0;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td>E F</td>
<td>&#x5305;&#x542B;&#x9009;&#x62E9;&#x7B26;</td>
<td>&#x9009;&#x62E9;&#x6240;&#x6709;&#x88AB;E&#x5143;&#x7D20;&#x5305;&#x542B;&#x7684;F&#x5143;&#x7D20;</td>
</tr>
<tr>
<td>E&gt;F</td>
<td>&#x5B50;&#x9009;&#x62E9;&#x7B26;</td>
<td>&#x9009;&#x62E9;&#x6240;&#x6709;&#x4F5C;&#x4E3A;E&#x5143;&#x7D20;&#x7684;&#x5B50;&#x5143;&#x7D20;F</td>
</tr>
<tr>
<td>E+F</td>
<td>&#x76F8;&#x90BB;&#x9009;&#x62E9;&#x7B26;</td>
<td>&#x9009;&#x62E9;&#x7D27;&#x8D34;&#x5728;E&#x5143;&#x7D20;&#x4E4B;&#x540E;F&#x5143;&#x7D20;</td>
</tr>
<tr>
<td>E~F</td>
<td>&#x5144;&#x5F1F;&#x9009;&#x62E9;&#x7B26;</td>
<td>&#x9009;&#x62E9;E&#x5143;&#x7D20;&#x6240;&#x6709;&#x5144;&#x5F1F;&#x5143;&#x7D20;F</td>
</tr>
</tbody>
</table>
<pre><code>        &lt;ul&gt;
            &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;    
        &lt;div&gt;
            &#x6211;&#x73B0;&#x5728;&#x7D27;&#x8DDF;&#x5728;ul&#x540E;&#x9762;
        &lt;/div&gt;
        &lt;div&gt;
            &#x6211;&#x73B0;&#x5728;&#x7D27;&#x8DDF;&#x5728;div&#x540E;&#x9762;
        &lt;/div&gt;
CSS:
    ul+div{
        background: skyblue;
}
    div+div{
        background: yellow;
}
    ul~div{
        background: skyblue;
}
</code></pre><ol>
<li><p>id &#x53CA; class &#x9009;&#x62E9;&#x7B26;</p>
<blockquote>
<p>(id:#{}) <br>
 (class: .{} )</p>
</blockquote>
</li>
<li><p>&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x90E8;&#x5206;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;</p>
</li>
</ol>
<pre><code>    &#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;&#x9700;&#x8981;&#x6309;&#x7167; lvha &#x987A;&#x5E8F;
    a:link{/*&#x8D85;&#x94FE;&#x63A5;a&#x5728;&#x672A;&#x88AB;&#x8BBF;&#x95EE;&#x524D;&#x7684;&#x6837;&#x5F0F;*/
        color:yellow;
    }
    a:visited{/*&#x8D85;&#x94FE;&#x63A5;a&#x5728;&#x5176;&#x94FE;&#x63A5;&#x5730;&#x5740;&#x5DF2;&#x88AB;&#x8BBF;&#x95EE;&#x8FC7;&#x65F6;&#x7684;&#x6837;&#x5F0F;*/
        color:red;
    }
    a:hover{/*&#x9F20;&#x6807;&#x79FB;&#x5165;&#x7684;&#x6837;&#x5F0F;*/
        color: blue;
    }
    a:active{/*&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x5728;&#x88AB;&#x7528;&#x6237;&#x6FC0;&#x6D3B;(&#x5728;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x4E0E;&#x91CA;&#x653E;&#x4E4B;&#x95F4;&#x53D1;&#x751F;&#x7684;&#x4E8B;&#x4EF6;)&#x65F6;&#x7684;&#x6837;&#x5F0F;&#x3002;*/
        color: black;
    }
    2n+1&#x3001;odd &#x4E3A;&#x5947;&#x6570;        2n&#x3001;even &#x4E3A;&#x5947;&#x6570;
</code></pre><table>
<thead>
<tr>
<th>&#x9009;&#x62E9;&#x7B26;</th>
<th>&#x7248;&#x672C;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td>E:first-child</td>
<td>CSS2</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:last-child</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:only-child</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x4EC5;&#x6709;&#x7684;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-child(n)</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x7B2C;n&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-last-child(n)</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x5012;&#x6570;&#x7B2C;n&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:first-of-type</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:last-of-type</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:only-of-type</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x552F;&#x4E00;&#x7684;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-of-type(n)</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x7B2C;n&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-last-of-type(n)</td>
<td>CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x5012;&#x6570;&#x7B2C;n&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:not(?)</td>
<td>CSS3</td>
<td>&#x63A7;&#x5236;&#x975E;&#xFF1F;&#x7684;&#x5143;&#x7D20;    </td>
</tr>
</tbody>
</table>
<ol>
<li>&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;<blockquote>
<p> E[att]                &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x7684;E&#x5143;&#x7D20;                                        <br>    </p>
<pre><code>     &lt;style&gt;
             div[class]{
                 background: skyblue;
             }
     &lt;/style&gt;    
     &lt;body&gt;
         &lt;div class=&quot;&quot;&gt;111&lt;/div&gt;
     &lt;/body&gt;
</code></pre><p> E[att=&quot;val&quot;]        &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x4E14;&#x5C5E;&#x6027;&#x503C;&#x7B49;&#x4E8E;val&#x7684;E&#x5143;&#x7D20;&#x3002;                         <br>    </p>
<pre><code>&#x5B8C;&#x5168;&#x5339;&#x914D;&#x7279;&#x5B9A;&#x7684;&#x5C5E;&#x6027;&#x548C;&#x5C5E;&#x6027;&#x7684;&#x503C;
 &lt;style&gt;
     div[class=&quot;bg&quot;]{
         background: yellow;
     }
 &lt;/style&gt;
 &lt;body&gt;
     &lt;div class=&quot;bg&quot;&gt;111&lt;/div&gt;
 &lt;/body
</code></pre><p>E[att~=&quot;val&quot;]       &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x4E14;&#x5C5E;&#x6027;&#x503C;&#x4E3A;&#x4E00;&#x7528;&#x7A7A;&#x683C;&#x5206;&#x9694;&#x7684;&#x5B57;&#x8BCD;&#x5217;&#x8868;&#xFF0C;&#x5176;&#x4E2D;&#x4E00;&#x4E2A;&#x7B49;&#x4E8E;val&#x7684;E&#x5143;&#x7D20;  <br></p>
<pre><code>A&#xFF1A;&#x5C5E;&#x4E8E;&#x7A7A;&#x683C;&#x9694;&#x5F00;&#x7684;&#x5C5E;&#x6027;&#x5217;&#x8868;&#x7684;&#x5176;&#x4E2D;&#x4E00;&#x5458;&#xFF1B;B:&#x53EA;&#x6709;&#x552F;&#x4E00;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x4E14;&#x503C;&#x5C31;&#x662F;&#x6307;&#x5B9A;&#x7684;&#x503C; 
 &lt;style&gt;
     div[class~=&quot;abc&quot;]{
         background: yellow;
     }
 &lt;/style&gt;
 &lt;body&gt;
     &lt;div class=&quot;bg abc&quot;&gt;11111111111111&lt;/div&gt;
 &lt;/body&gt;
</code></pre><p>E[att^=&quot;val&quot;]      &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x4E14;&#x5C5E;&#x6027;&#x503C;&#x4E3A;&#x4EE5;val&#x5F00;&#x5934;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x7684;E&#x5143;&#x7D20;&#x3002;                <br></p>
<pre><code> &lt;style&gt;
     div[class^=&quot;r&quot;]{
         background: red;
     }
 &lt;/style&gt;
 &lt;body&gt;
     &lt;div class=&quot;rencontre&quot;&gt;11111111111111&lt;/div&gt;
 &lt;/body&gt;
</code></pre><p>E[att$=&quot;val&quot;]      &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x4E14;&#x5C5E;&#x6027;&#x503C;&#x4E3A;&#x4EE5;val&#x7ED3;&#x5C3E;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x7684;E&#x5143;&#x7D20;&#x3002;                <br></p>
<pre><code> &lt;style&gt;
     div[class$=&quot;e&quot;]{
         background: black;
     }
 &lt;/style&gt;
 &lt;body&gt;
     &lt;div class=&quot;rencontre&quot;&gt;11111111111111&lt;/div&gt;
 &lt;/body&gt;
</code></pre><p>E[att*=&quot;val&quot;]      &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x4E14;&#x5C5E;&#x6027;&#x503C;&#x4E3A;&#x5305;&#x542B;val&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x7684;E&#x5143;&#x7D20;&#x3002;                  <br>        </p>
<pre><code>&#x5339;&#x914D;&#x5177;&#x6709;&#x7279;&#x5B9A;&#x5B57;&#x7B26;&#x7684;&#x5C5E;&#x6027;&#x503C;(&#x53EA;&#x8981;&#x5305;&#x542B;&#x5176;&#x4E2D;&#x5C31;&#x884C;&#xFF0C;&#x4E0D;&#x4E00;&#x5B9A;&#x8981;&#x5168;&#x5339;&#x914D;)
 &lt;style&gt;
     div[class*=&quot;t&quot;]{
         background: blanchedalmond;
     }
 &lt;/style&gt;
 &lt;body&gt;
     &lt;div class=&quot;rencontre&quot;&gt;11111111111111&lt;/div&gt;
 &lt;/body&gt;
</code></pre><p>E[att|=&quot;val&quot;]      &#x9009;&#x62E9;&#x5177;&#x6709;att&#x5C5E;&#x6027;&#x4E14;&#x5C5E;&#x6027;&#x503C;&#x4E3A;&#x4EE5;val&#x5F00;&#x5934;&#x5E76;&#x7528;&#x8FDE;&#x63A5;&#x7B26;&quot;-&quot;&#x5206;&#x9694;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x7684;E&#x5143;&#x7D20;&#x3002; <br></p>
<pre><code>1&#x3001;&#x6709;&#x4E14;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x4E14;&#x7B26;&#x5408;&#x7279;&#x5B9A;&#x7684;&#x503C;
2&#x3001;&#x5E26;&#x6709;&#x7279;&#x5B9A;&#x503C;&#x4E14;&#x540E;&#x9762;&#x8DDF;&#x4E0A;&#x201C;-&#x201D;
 &lt;style&gt;
     div[class|=&quot;ren&quot;]{
         background: pink;
     }
 &lt;/style&gt;
 &lt;body&gt;
     &lt;div class=&quot;ren-con-tre&quot;&gt;11111111111111&lt;/div&gt;
 &lt;/body&gt;
</code></pre></blockquote>
</li>
</ol>
<ol>
<li>&#x4F2A;&#x5BF9;&#x8C61;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;</li>
</ol>
<table>
<thead>
<tr>
<th>&#x9009;&#x62E9;&#x7B26;</th>
<th>&#x7248;&#x672C;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td>E:first-letter/E::first-letter</td>
<td>CSS1/3</td>
<td>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x5185;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x7684;&#x6837;&#x5F0F;</td>
</tr>
<tr>
<td>E:first-line/E::first-line</td>
<td>CSS1/3</td>
<td>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x5185;&#x7684;&#x7B2C;&#x4E00;&#x884C;&#x7684;&#x6837;&#x5F0F;</td>
</tr>
<tr>
<td>E:before/E::before</td>
<td>CSS2/3</td>
<td>&#x8BBE;&#x7F6E;&#x5728;&#x5BF9;&#x8C61;&#x524D;&#xFF08;&#x4F9D;&#x636E;&#x5BF9;&#x8C61;&#x6811;&#x7684;&#x903B;&#x8F91;&#x7ED3;&#x6784;&#xFF09;&#x53D1;&#x751F;&#x7684;&#x5185;&#x5BB9;&#x3002;&#x7528;&#x6765;&#x548C;content&#x5C5E;&#x6027;&#x4E00;&#x8D77;&#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>E:after/E::after</td>
<td>CSS2/3</td>
<td>&#x8BBE;&#x7F6E;&#x5728;&#x5BF9;&#x8C61;&#x540E;&#xFF08;&#x4F9D;&#x636E;&#x5BF9;&#x8C61;&#x6811;&#x7684;&#x903B;&#x8F91;&#x7ED3;&#x6784;&#xFF09;&#x53D1;&#x751F;&#x7684;&#x5185;&#x5BB9;&#x3002;&#x7528;&#x6765;&#x548C;content&#x5C5E;&#x6027;&#x4E00;&#x8D77;&#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>E::placeholder</td>
<td>CSS3</td>
<td>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x6587;&#x5B57;&#x5360;&#x4F4D;&#x7B26;&#x7684;&#x6837;&#x5F0F;</td>
</tr>
<tr>
<td>E::selection</td>
<td>CSS3</td>
<td>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x88AB;&#x9009;&#x62E9;&#x65F6;&#x7684;&#x989C;&#x8272;</td>
</tr>
</tbody>
</table>
<pre><code>    &lt;style&gt;
        div::before{
            content: &quot;(&quot;;
        }
        div::after{
            content: &quot;)&quot;;
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;11111111111111&lt;/div&gt;
    &lt;/body&gt;

::placeholder     &#x517C;&#x5BB9;&#x6027;&#x8F83;&#x5DEE;&#xFF0C;&#x9700;&#x8981;&#x6DFB;&#x52A0;&#x6D4F;&#x89C8;&#x5668;&#x524D;&#x7F00;
    html&#xFF1A;&lt;input type=&quot;search&quot; placeholder=&quot;&#x6D4B;&#x8BD5;&quot;&gt;
    css: 
               input::-webkit-input-placeholder {
            color: green;}

               input:-ms-input-placeholder { // IE10+
             color: green;}

                input:-moz-placeholder { // Firefox4-18
             color: green;}
             input::-moz-placeholder { // Firefox19+
             color: green;}
::selection  &#x517C;&#x5BB9;&#x6027;&#x8F83;&#x5DEE;&#xFF0C;&#x9700;&#x8981;&#x6DFB;&#x52A0;&#x6D4F;&#x89C8;&#x5668;&#x524D;&#x7F00;
    html:        &lt;h3&gt;&#x8BF7;&#x4F7F;&#x7528;&#x9F20;&#x6807;&#x9009;&#x53D6;&#x6211;&lt;/h3&gt;
                 &lt;p&gt;&#x8BF7;&#x4F7F;&#x7528;&#x9F20;&#x6807;&#x9009;&#x53D6;&#x6211;&lt;/p&gt;
    css:
        p::-moz-selection{ background-color:#E13300; color: white;}
           p::selection{ background-color: #E13300; color: white; }
</code></pre><p>transition &#x8FC7;&#x6E21;&#x52A8;&#x753B;&#xFF0C;&#x7F13;&#x51B2;&#x6548;&#x679C;</p>
<pre><code>bootstrap&#x6846;&#x67B6;&#xFF1A;
&#x6570;&#x636E;&#x884C;(.row)&#x5FC5;&#x987B;&#x5305;&#x542B;&#x5728;&#x5BB9;&#x5668;&#xFF08;.Container&#xFF09;&#x4E2D;
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;col-md-8&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

col-xs-? &#x8D85;&#x5C0F;&#x578B;&#x8BBE;&#x5907;      &#xFF08;max-width&#xFF1A;768px&#xFF09;
col-sm-? &#x5C0F;&#x578B;&#x8BBE;&#x5907;       &#xFF08;min-width&#xFF1A;768px&#xFF09;
col-md-? &#x4E2D;&#x578B;&#x8BBE;&#x5907;          &#xFF08;min-width&#xFF1A;992px&#xFF09;
col-lg-? &#x5927;&#x578B;&#x8BBE;&#x5907;         &#xFF08;min-width&#xFF1A;1200px&#xFF09;
</code></pre><h1 id="css&#x6837;&#x5F0F;">CSS&#x6837;&#x5F0F;</h1>
<ol>
<li><h4 id="fontfamily">font-family</h4>
<h5 id="&#x7528;&#x6765;&#x8BBE;&#x7F6E;&#x6587;&#x5B57;&#x7684;&#x5B57;&#x4F53;&#xFF1A;">&#x7528;&#x6765;&#x8BBE;&#x7F6E;&#x6587;&#x5B57;&#x7684;&#x5B57;&#x4F53;&#xFF1A;</h5>
<pre><code>   1&#x3001;&#x53EF;&#x4EE5;&#x4F20;&#x5165;&#x591A;&#x4E2A;&#x503C;&#xFF0C;&#x7528;&#x9017;&#x53F7;&#x9694;&#x5F00;
   2&#x3001;&#x8BFB;&#x53D6;&#x7684;&#x987A;&#x5E8F;&#x662F;&#x4ECE;&#x5DE6;&#x5230;&#x53F3;&#xFF0C;&#x5982;&#x679C;&#x5DE6;&#x4FA7;&#x5B57;&#x4F53;&#x4E0D;&#x5B58;&#x5728;&#xFF0C;&#x5219;&#x8BFB;&#x4E0B;&#x4E00;&#x4F4D;&#xFF0C;&#x76F4;&#x5230;&#x4F7F;&#x7528;&#x7CFB;&#x7EDF;&#x9ED8;&#x8BA4;&#x5B57;&#x4F53;
   3&#x3001;&#x8BBE;&#x7F6E;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5EFA;&#x8BAE;&#x5148;&#x5199;&#x897F;&#x6587;&#x5B57;&#x4F53;&#xFF0C;win&#x4E2D;&#x6587;&#x5B57;&#x4F53;&#xFF0C;mac&#x4E2D;&#x6587;&#x5B57;&#x4F53;&#xFF0C;&#x901A;&#x7528;&#x7684;&#x4E2D;&#x6587;&#x5B57;&#x4F53;
    eg&#xFF1A;font-family:&quot;&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;&quot;&#xFF0C;&quot;&#x5B8B;&#x4F53;&quot;,&quot;&#x6977;&#x4F53;&quot;&#xFF1B;
</code></pre><h5 id="&#x6CE8;&#x610F;&#xFF1A;">&#x6CE8;&#x610F;&#xFF1A;</h5>
<pre><code>    &#x5047;&#x5982;&#x8BBE;&#x8BA1;&#x4E2D;&#x7528;&#x5230;&#x975E;&#x4E3B;&#x6D41;&#x5B57;&#x4F53;
   1&#x3001;&#x7248;&#x6743;&#x95EE;&#x9898;
   2&#x3001;&#x8003;&#x8651;&#x5B57;&#x4F53;&#x5E93;&#x7684;&#x5927;&#x5C0F;&#x3001;&#x897F;&#x6587;&#x5B57;&#x4F53;&#x5E93;&#x8FD8;&#x53EF;&#x4EE5;(&#x5927;&#x5C0F;&#x63A7;&#x5236;&#x5728;300K),&#x4E2D;&#x6587;&#x5B57;&#x4F53;&#x5C31;&#x529D;&#x5176;&#x653E;&#x5F03; 
</code></pre><pre><code>font-family: &quot;&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;&quot;;
font-size: 30px;
font-weight: bold;/*&#x5B57;&#x4F53;&#x52A0;&#x7C97;*/
font-style: italic;/*&#x63A7;&#x5236;&#x659C;&#x4F53;*/
font-variant: small-caps;
/*&#x63A7;&#x5236;&#x897F;&#x6587;&#x5B57;&#x4F53;&#xFF0C;small-caps&#x8F6C;&#x6362;&#x4E3A;&#x5927;&#x5199;&#x5B57;&#x6BCD;&#xFF0C;&#x4F46;&#x4F1A;&#x8F6C;&#x6362;&#x6210;&#x5C0F;&#x5199;&#x5B57;&#x6BCD;&#x5C3A;&#x5BF8;*/
&#x590D;&#x5408;&#x5C5E;&#x6027; font:font-style  font-variant  font-weight  font-size/line-height  font-family;

           font:italic small-caps bold 30px/100px &apos;&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;&apos;;
</code></pre></li>
<li><p>color:rgba(0,0,0,&#x900F;&#x660E;&#x5EA6;) &#x53EF;&#x4EE5;&#x652F;&#x6301;&#x900F;&#x660E;&#x5EA6;&#x7684;&#x989C;&#x8272;&#x503C;</p>
<blockquote>
<p>&#x517C;&#x5BB9;&#x6027;&#xFF1A;IE6~8&#x4E0D;&#x652F;&#x6301;&#xFF0C;&#x5176;&#x4ED6;&#x6D4F;&#x89C8;&#x5668;&#x90FD;&#x652F;&#x6301;</p>
</blockquote>
</li>
<li><p>text-decoration(&#x6587;&#x672C;&#x88C5;&#x9970;&#x7EBF;&#x6761;)</p>
<blockquote>
<p>none || overline(&#x6587;&#x672C;&#x4E0A;&#x9762;&#x7684;&#x6A2A;&#x7EBF;) || line-through(&#x7A7F;&#x8FC7;&#x6587;&#x672C;&#x7684;&#x6A2A;&#x7EBF;) || underline(&#x6587;&#x672C;&#x5E95;&#x90E8;&#x7684;&#x6A2A;&#x7EBF;)</p>
</blockquote>
</li>
<li><p>text-shadow(&#x6587;&#x5B57;&#x9634;&#x5F71;) box-shadow(&#x76D2;&#x9634;&#x5F71;)</p>
<blockquote>
<p>text-shadow: &#x6C34;&#x5E73;&#x65B9;&#x5411; &#x5782;&#x76F4;&#x65B9;&#x5411;   &#x6A21;&#x7CCA;&#x5EA6;  &#x9634;&#x5F71;&#x989C;&#x8272;;(&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x591A;&#x4E2A;&#x9634;&#x5F71;&#xFF0C;&#x7528;&#x9017;&#x53F7;&#x9694;&#x5F00;) <br>
box-shadow:  &#x6C34;&#x5E73;&#x65B9;&#x5411; &#x5782;&#x76F4;&#x65B9;&#x5411;   &#x6A21;&#x7CCA;&#x5EA6;  &#x9634;&#x5F71;&#x989C;&#x8272;;</p>
</blockquote>
</li>
<li><p>@font-face&#x5D4C;&#x5165;&#x5B57;&#x4F53;</p>
<blockquote>
<p>@font-face{</p>
<pre><code> font-family:&#x81EA;&#x5B9A;&#x4E49;&#x5B57;&#x4F53;&#x540D;&#x79F0;;
 src:url(&#x5B57;&#x4F53;&#x6587;&#x4EF6;&#x5728;&#x670D;&#x52A1;&#x5668;&#x4E0A;&#x7684;&#x76F8;&#x5BF9;&#x6216;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;);
</code></pre><p>}<br></p>
<pre><code>@font-face {
 /*&#x8BE5;&#x5199;&#x6CD5;&#x662F;&#x517C;&#x5BB9;&#x6240;&#x6709;&#x7684;&#x6D4F;&#x89C8;&#x5668;*/
  font-family : bgg;
  src: url(&apos;fonts/fontawesome-webfont.eot&apos;), /* IE9+ */
       url(&apos;fonts/fontawesome-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;), /* IE6-IE8 */
       url(&apos;fonts/fontawesome-webfont.woff&apos;) format(&apos;woff&apos;), /* chrome&#x3001;firefox */
       url(&apos;fonts/fontawesome-webfont.ttf&apos;) format(&apos;truetype&apos;), /* chrome&#x3001;firefox&#x3001;opera&#x3001;Safari,Android, iOS 4.2+*/
       url(&apos;fonts/fontawesome-webfont.svg&apos;) format(&apos;svg&apos;); /* iOS 4.1+ */
}
&#x4F7F;&#x7528;&#x5916;&#x90E8;icon&#x56FE;&#x6807;&#x5E93;
 &#x2460; &#x4E0B;&#x8F7D;&#x5FC3;&#x4EEA;&#x7684;&#x5C0F;&#x56FE;&#x6807;
 &#x2461; &#x628A;iconfont.css&#x62F7;&#x8D1D;&#x5230;&#x9879;&#x76EE;&#x76EE;&#x5F55;&#x4E0B;&#x7684;css&#x6587;&#x4EF6;&#x5939;
 &#x2462; &#x628A;eot&#xFF0C;svg&#xFF0C;ttf&#xFF0C;woff&#x7B49;&#x5B57;&#x4F53;&#x5E93;&#x6587;&#x4EF6;&#x62F7;&#x8D1D;&#x5230;&#x9879;&#x76EE;&#x76EE;&#x5F55;&#x4E0B;&#x7684;font&#x6587;&#x4EF6;&#x5939;
 &#x2463; &#x4FEE;&#x6539;iconfont.css&#x91CC;&#x7684;font-face&#x5F15;&#x5165;&#x8DEF;&#x5F84;
 &#x2464; &#x628A;html&#x9875;&#x9762;&#x4E2D;&#xFF0C;link&#x5F15;&#x5165;iconfont.css
 &#x2465; &#x7528;&#x5982;&#x4E0B;&#x4EE3;&#x7801;&#x4F7F;&#x7528;&#x5373;&#x53EF;
     &lt;i class=&quot;iconfont icon-rabbit&quot;&gt;&lt;/i&gt;
 &#x2466; &#x5982;&#x679C;&#x9700;&#x8981;&#x4FEE;&#x6539;&#x5176;&#x989C;&#x8272;&#x6216;&#x5927;&#x5C0F;&#xFF0C;&#x53EF;&#x4EE5;&#x9009;&#x4E2D;&#x5B83;&#x5E76;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;
</code></pre></blockquote>
</li>
<li><p>&#x900F;&#x660E;&#x5EA6; opacity</p>
<pre><code> IE6~8&#xFF1A;         filter:alpha(opacity:100);
 &#x5176;&#x4ED6;&#x6D4F;&#x89C8;&#x5668;         opacity:1;
</code></pre></li>
<li><p>&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1A;marign  padding  border</p>
<blockquote>
<p>&#x5143;&#x7D20;&#x6700;&#x7EC8;&#x6240;&#x5360;&#x5BBD;&#x5EA6;&#xFF1A;&#x5DE6;&#x8FB9;&#x6846;&#x5BBD; + &#x5DE6;&#x5185;&#x8FB9;&#x8DDD; + &#x5185;&#x5BB9;&#x5BBD;&#x5EA6; + &#x53F3;&#x5185;&#x8FB9;&#x8DDD; + &#x53F3;&#x8FB9;&#x6846;&#x5BBD;</p>
</blockquote>
</li>
<li><p>border</p>
<h5 id="&#x8FB9;&#x6846;&#x7EBF;-borderstyle">&#x8FB9;&#x6846;&#x7EBF; border-style</h5>
</li>
</ol>
<pre><code>          border-style : none | hidden | dotted | dashed | solid |
                         double | groove |ridge | inset  | outset 
            border-top-style     &#x8BBE;&#x7F6E;&#x4E0A;&#x8FB9;&#x6846;&#x7EBF;
            border-bottom-style &#x8BBE;&#x7F6E;&#x4E0B;&#x8FB9;&#x6846;&#x7EBF;
            border-left-style     &#x8BBE;&#x7F6E;&#x5DE6;&#x8FB9;&#x6846;&#x7EBF;
            border-right-style     &#x8BBE;&#x7F6E;&#x53F3;&#x8FB9;&#x6846;&#x7EBF;
            border-top-color     &#x8BBE;&#x7F6E;&#x4E0A;&#x8FB9;&#x6846;&#x989C;&#x8272;
            border-bottom-color &#x8BBE;&#x7F6E;&#x4E0B;&#x8FB9;&#x6846;&#x989C;&#x8272;
            border-left-color     &#x8BBE;&#x7F6E;&#x5DE6;&#x8FB9;&#x6846;&#x989C;&#x8272;
            border-right-color     &#x8BBE;&#x7F6E;&#x53F3;&#x8FB9;&#x6846;&#x989C;&#x8272;        


    div{
            width:200px;
            height: 200px;
            borer:solid;
            /*border-top-style: dashed; &#x865A;&#x7EBF;(&#x8F83;&#x7C97;)*/
            /*border-top-style: hidden ;&#x9690;&#x85CF;*/
            /*  border-top-style: dotted &#x865A;&#x7EBF;(&#x8F83;&#x7EC6;) ;*/
            /*border-top-style:solid ;&#x5B9E;&#x7EBF;*/
            /*border-top-style:double  ;&#x53CC;&#x7EBF;*/
            /*border-top-style:groove;3D &#x51F9;&#x69FD;&#x8FB9;&#x6846;*/
            /*border-top-style:ridge ;&#x5B9A;&#x4E49; 3D &#x5784;&#x72B6;&#x8FB9;&#x6846;*/
            /*border-top-style:inset;&#x5B9A;&#x4E49; 3D inset &#x8FB9;&#x6846;*/
            border-top-style:outset;&#x5B9A;&#x4E49; 3D outset &#x8FB9;&#x6846;
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;BlueJBlueJBlueJBlueJBlueJ&lt;/div&gt;
    &lt;/body&gt;
</code></pre><h4 id="&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;borderwidth-&#x8FB9;&#x6846;&#x989C;&#x8272;bordercolor">&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;border-width &#x8FB9;&#x6846;&#x989C;&#x8272;border-color</h4>
<pre><code> border-width:medium | thin | thick | length     
border-top-width         &#x8BBE;&#x7F6E;&#x4E0A;&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;

border-bottom-width     &#x8BBE;&#x7F6E;&#x4E0B;&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;

border-left-width         &#x8BBE;&#x7F6E;&#x5DE6;&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;

border-right-width         &#x8BBE;&#x7F6E;&#x53F3;&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;

    &lt;style&gt;
        div{
            width:200px;
            height: 200px;
            border:1px solid #ccc;
            /*border-top-width: 5px;    &#x5141;&#x8BB8;&#x60A8;&#x81EA;&#x5B9A;&#x4E49;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;*/
            /*border-top-width: medium;&#x9ED8;&#x8BA4;&#x503C;&#x3002;&#x5B9A;&#x4E49;&#x4E2D;&#x7B49;&#x7684;&#x4E0A;&#x8FB9;&#x6846;&#x3002;*/
            /*border-top-width: inherit    &#x89C4;&#x5B9A;&#x5E94;&#x8BE5;&#x4ECE;&#x7236;&#x5143;&#x7D20;&#x7EE7;&#x627F;&#x8FB9;&#x6846;&#x5BBD;&#x5EA6;&#x3002;*/;
            /*border-top-width: initial;*/
            /*border-top-width: thick;    &#x5B9A;&#x4E49;&#x7C97;&#x7684;&#x4E0A;&#x8FB9;&#x6846;&#x3002;*/
            border-top-width: thin;/*&#x5B9A;&#x4E49;&#x7EC6;&#x7684;&#x4E0A;&#x8FB9;&#x6846;*/
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;BlueJBlueJBlueJBlueJBlueJ&lt;/div&gt;
    &lt;/body&gt;
</code></pre><h4 id="&#x8FB9;&#x6846;&#x6837;&#x5F0F;&#x7F29;&#x5199;">&#x8FB9;&#x6846;&#x6837;&#x5F0F;&#x7F29;&#x5199;</h4>
<blockquote>
<p>border: 1px solid #ccc;</p>
</blockquote>
<h4 id="&#x5706;&#x89D2;&#x6548;&#x679C;">&#x5706;&#x89D2;&#x6548;&#x679C;</h4>
<blockquote>
<p>border-radius:50px||50%  &#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x50CF;&#x7D20;&#x503C;&#x6216;&#x8005;&#x767E;&#x5206;&#x6BD4; <br>
&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;4~8&#x4E2A;&#x503C;&#xFF0C;&#x5DE6;&#x4E0A;&#x53F3;&#x4E0A;&#x53F3;&#x4E0B;&#x5DE6;&#x4E0B;(&#x987A;&#x65F6;&#x9488;&#x65B9;&#x5411;)</p>
<pre><code>&lt;style&gt;
    div{
            width:200px;
            height: 200px;
            border:1px solid #ccc;
            border-radius:50%;
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;BlueJBlueJBlueJBlueJBlueJ&lt;/div&gt;
    &lt;/body&gt;
</code></pre></blockquote>
<h4 id="&#x8FB9;&#x6846;&#x56FE;&#x7247;-borderimage">&#x8FB9;&#x6846;&#x56FE;&#x7247; border-image</h4>
<blockquote>
<p>border-image&#xFF1A;&lt;&apos; border-image-source &apos;&gt; || &lt;&apos; border-image-slice &apos;&gt; [ / &lt;&apos; border-image-width &apos;&gt; | / &lt;&apos; border-image-width &apos;&gt;? / &lt;&apos; border-image-outset &apos;&gt; ]? || &lt;&apos; border-image-repeat&apos;&gt;
    &#x8FB9;&#x6846;&#x6837;&#x5F0F;&#x4F7F;&#x7528;&#x56FE;&#x50CF;&#x6765;&#x586B;&#x5145;&#x3002;
   </p><p style="color:red;">&#x6CE8;&#x610F;</p>
      border-image-slice &#xFF1A; &#x662F;&#x4E00;&#x4E2A;&#x6570;&#x503C;&#x6216;&#x767E;&#x5206;&#x6BD4;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x5E26;&#x5355;&#x4F4D;&#xFF08;&#x7279;&#x6307;px&#xFF09;&#x8BBE;&#x7F6E;&#x4E86;border-image&#x4E4B;&#x540E;&#xFF0C;border-style&#x5219;&#x4E0D;&#x663E;&#x793A;<p></p>
<pre><code>&#x8FB9;&#x6846;&#x56FE;&#x7247;&#x7684;&#x5BBD;&#x548C;&#x9AD8;&#x90FD;&#x9700;&#x8981;&#x662F;3&#x7684;&#x500D;&#x6570;&#xFF1B;
&lt;style&gt;
    div{
            width:200px;
            height: 200px;
            border:5px solid #ccc;
            border-image: url(img/jupiter.png)20 20 repeat;
            border-image: url(img/jupiter.png)20 20 round;
            border-image: url(img/jupiter.png)20 20 space;
            border-image: url(img/jupiter.png)20 20 stretch;
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;BlueJBlueJBlueJBlueJBlueJ&lt;/div&gt;
    &lt;/body&gt;
    box-sizing &#x6539;&#x53D8;&#x5BBD;&#x9AD8;&#x7684;&#x8BBE;&#x7F6E;&#x89C4;&#x5219;&#xFF0C;&#x7531;&#x63A7;&#x5236;&#x5185;&#x5BB9;&#x76D2;&#x5B50;&#x53D8;&#x66F4;&#x4E3A;&#x63A7;&#x5236;&#x8FB9;&#x6846;&#x4EE5;&#x5185;&#x7684;&#x533A;&#x57DF;
    box-sizing: border-box;
</code></pre></blockquote>
<h4 id="&#x80CC;&#x666F;-backgrund">&#x80CC;&#x666F; backgrund</h4>
<blockquote>
<p>1&#x3001;&#x80CC;&#x666F;&#x989C;&#x8272;  background-color:red || rgba() || #000;  <br>
  2&#x3001;&#x6E10;&#x53D8;&#x8272;&#x5F69; linear-gradient(A,startcolor &#x767E;&#x5206;&#x6BD4;,endcolor)
&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x7701;&#x7565;&#x65F6;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A;&#x201C;180deg&#x201D;&#xFF0C;&#x7B49;&#x540C;&#x4E8E;&#x201C;to bottom&#x201D;&#x3002;<br>
     &#x7B2C;&#x4E8C;&#x4E2A;&#x548C;&#x7B2C;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x8868;&#x793A;&#x989C;&#x8272;&#x7684;&#x8D77;&#x59CB;&#x70B9;&#x548C;&#x7ED3;&#x675F;&#x70B9;&#xFF0C;&#x53EF;&#x4EE5;&#x6709;&#x591A;&#x4E2A;&#x989C;&#x8272;&#x503C;&#x3002;(&#x989C;&#x8272;&#x503C;&#x540E;&#x9762;&#x53EF;&#x4EE5;&#x8FFD;&#x52A0;&#x767E;&#x5206;&#x6BD4;&#xFF0C;&#x8868;&#x793A;&#x8FD9;&#x4E2A;&#x989C;&#x8272;&#x8981;&#x5360;&#x603B;&#x80CC;&#x666F;&#x989C;&#x8272;&#x9762;&#x79EF;&#x7684;&#x767E;&#x5206;&#x6BD4;) </p>
</blockquote>
<pre><code>     &lt;style&gt;
    div{
            width:200px;
            height: 200px;
            border:1px solid #ccc;
            /*background: linear-gradient(to top right,#fff 20%,#ccc);*/
            background: linear-gradient(60deg,red 55%,yellow);
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;BlueJBlueJBlueJBlueJBlueJ&lt;/div&gt;
    &lt;/body&gt;
</code></pre><blockquote>
<p>3&#x3001; &#x80CC;&#x666F;&#x56FE;&#x7247; background-image :  url();  <br></p>
<p>4&#x3001; &#x80CC;&#x666F;&#x5E73;&#x94FA;&#x65B9;&#x5F0F; <br></p>
<pre><code>background-repeat : repeat | no-repeat | repeat-x | repeat-y 
repeat:&#x91CD;&#x590D;&#x5E73;&#x94FA;
no-repeat&#xFF1A;&#x4E0D;&#x91CD;&#x590D;
repeat-x &#xFF1A;&#x5411;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x5E73;&#x94FA;
repeat-x &#xFF1A;&#x5411;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x5E73;&#x94FA;
space    :&#x6839;&#x636E;&#x5BB9;&#x5668;&#x5927;&#x5C0F;&#x8FDB;&#x884C;&#x5E73;&#x94FA;
</code></pre><p>5&#x3001;&#x80CC;&#x666F;&#x5B9A;&#x4F4D;   background-position :(&#x56FE;&#x7247;&#x4F4D;&#x7F6E;) </p>
<p>6&#x3001;&#x80CC;&#x666F;&#x539F;&#x70B9;   </p>
<pre><code>        &#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x7684;&#x539F;&#x59CB;&#x8D77;&#x59CB;&#x4F4D;&#x7F6E;&#x3002;&#x5FC5;&#x987B;&#x4FDD;&#x8BC1;&#x80CC;&#x666F;&#x662F;background-repeat&#x4E3A;no-repeat
        &#x6B64;&#x5C5E;&#x6027;&#x624D;&#x4F1A;&#x751F;&#x6548;&#x3002; 
        background-origin &#xFF1A;
        | border-box: &#x4ECE;border&#x5F00;&#x59CB;&#xFF0C;&#x5305;&#x542B;bord
        | padding-box:&#x4ECE;padding&#x5F00;&#x59CB;&#xFF0C;&#x5305;&#x542B;padding 
        | content-box:&#x4ECE;&#x5185;&#x5BB9;&#x533A;&#x57DF;&#x5F00;&#x59CB;&#xFF0C;&#x4E0D;&#x5305;&#x542B;padding
</code></pre><p>7&#x3001;&#x80CC;&#x666F;&#x7684;&#x663E;&#x793A;&#x533A;&#x57DF;   </p>
<pre><code>&#x8BBE;&#x5B9A;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5411;&#x5916;&#x88C1;&#x526A;&#x7684;&#x533A;&#x57DF;&#x3002;
    background-clip &#xFF1A; border-box | padding-box | content-box | text=
</code></pre><p>8&#x3001;&#x80CC;&#x666F;&#x6837;&#x5F0F;&#x7F29;&#x5199;</p>
<pre><code>  background: &#x80CC;&#x666F;&#x8272;  &#x80CC;&#x666F;&#x56FE;&#x7247;  &#x80CC;&#x666F;&#x5E73;&#x94FA;&#x65B9;&#x5F0F;  &#x80CC;&#x666F;&#x5B9A;&#x4F4D;
  &lt;style&gt;
    div{
            width:200px;
            height: 200px;
            border:1px solid #ccc;
            background: #ccc url(jupiter.png) repeat 50px 50px;
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;BlueJBlueJBlueJBlueJBlueJ&lt;/div&gt;
    &lt;/body&gt;
</code></pre><p>CSS&#x7ED8;&#x5236;&#x4E09;&#x89D2;&#x5F62;</p>
<pre><code>    &lt;style type=&quot;text/css&quot;&gt;
        div{
            width:0;
            height: 0;
            border-left:50px solid transparent ;
            border-right: 50px solid transparent;
            border-top:50px solid red;
        }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/body&gt;
     1&#x3001;&#x8BBE;&#x7F6E;&#x5BB9;&#x5668;&#x7684;&#x5927;&#x5C0F;&#x4E3A;0
     2&#x3001;&#x6BCF;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;&#x90FD;&#x662F;&#x7531;&#x4E09;&#x6761;&#x76F8;&#x90BB;&#x7684;&#x8FB9;&#x7EC4;&#x6210;&#xFF0C;&#x6839;&#x636E;&#x6211;&#x4EEC;&#x8981;&#x753B;&#x7684;&#x4E09;&#x89D2;&#x5F62;&#x7684;&#x65B9;&#x5411;&#xFF0C;&#x6765;&#x51B3;&#x5B9A;&#x7528;&#x54EA;&#x6761;&#x8FB9;&#x4F5C;&#x4E3A;&#x4E3B;&#x8FB9;
     3&#x3001;&#x53E6;&#x5916;&#x76F8;&#x90BB;&#x7684;&#x4E24;&#x6761;&#x8FB9;&#xFF0C;&#x5C31;&#x662F;&#x6253;&#x8F85;&#x52A9;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E3A;&#x900F;&#x660E;&#xFF0C;&#x5E76;&#x4E14;&#x901A;&#x8FC7;&#x8FD9;&#x4E24;&#x6761;&#x8FB9;&#xFF0C;&#x6765;&#x51B3;&#x5B9A;&#x4E09;&#x89D2;&#x5F62;&#x7684;&#x5BBD;&#x5EA6;
</code></pre></blockquote>
<h4 id="&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4E0E;&#x884C;&#x5185;&#x5143;&#x7D20;">&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4E0E;&#x884C;&#x5185;&#x5143;&#x7D20;</h4>
<pre><code>&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1A;1&#x3001;&#x72EC;&#x81EA;&#x9738;&#x5360;&#x4E00;&#x884C;
        2&#x3001;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;
        3&#x3001;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x56DB;&#x4E2A;&#x65B9;&#x5411;&#x7684;&#x5185;&#x5916;&#x8FB9;&#x8DDD;,&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x8D1F;&#x503C;(&#x5143;&#x7D20;&#x671D;&#x7740;&#x53CD;&#x65B9;&#x5411;&#x79FB;&#x52A8;)
        4&#x3001;&#x5916;&#x8FB9;&#x8DDD;&#x5728;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x4E0A;&#xFF0C;&#x4F1A;&#x8FDB;&#x884C;&#x91CD;&#x5408;&#xFF0C;&#x53D6;&#x6700;&#x5927;&#x503C;&#xFF0C;&#x4F5C;&#x4E3A;&#x4E24;&#x4E2A;&#x5143;&#x7D20;&#x4E4B;&#x95F4;&#x7684;&#x5782;&#x76F4;&#x95F4;&#x9699;
&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1A;1&#x3001;&#x53EF;&#x4EE5;&#x8DDF;&#x5176;&#x4ED6;&#x975E;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x73A9;&#x5728;&#x4E00;&#x8D77;
        2&#x3001;&#x5982;&#x679C;&#x5F53;&#x524D;&#x884C;&#x585E;&#x4E0D;&#x4E0B;&#xFF0C;&#x4F1A;&#x81EA;&#x52A8;&#x8DF3;&#x5230;&#x4E0B;&#x4E00;&#x884C;
        3&#x3001;&#x4E0D;&#x80FD;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#xFF0C;&#x4E5F;&#x4E0D;&#x80FD;&#x8BBE;&#x7F6E;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x7684;&#x5916;&#x8FB9;&#x8DDD;&#x548C;&#x4E0A;&#x5185;&#x8FB9;&#x8DDD;
        4&#x3001;&#x5BB9;&#x5668;&#x7684;&#x5927;&#x5C0F;&#xFF0C;&#x662F;&#x7531;&#x5185;&#x5BB9;&#x548C;&#x5185;&#x8FB9;&#x8DDD;&#x51B3;&#x5B9A;&#x3002;(&#x65E0;&#x6CD5;&#x76F4;&#x63A5;&#x7528;width&#x3001;height&#xFF0C;&#x6216;&#x8005;line-height&#x6765;&#x6539;&#x53D8;)
</code></pre><h4 id="float&#x6D6E;&#x52A8;">float&#x6D6E;&#x52A8;</h4>
<pre><code>&#x6D6E;&#x52A8;: 1&#x3001;&#x8BA9;&#x8BBE;&#x7F6E;&#x7684;&#x5143;&#x7D20;&#x5F80;&#x6307;&#x5B9A;&#x65B9;&#x5411;&#x79FB;&#x52A8;&#xFF0C;&#x76F4;&#x5230;&#x78B0;&#x5230;&#x7236;&#x5143;&#x7D20;&#x7684;&#x8FB9;&#x754C;&#x6216;&#x78B0;&#x5230;&#x5176;&#x4ED6;&#x6D6E;&#x52A8;&#x5143;&#x7D20;
     2&#x3001;&#x8BBE;&#x7F6E;&#x4E86;&#x6D6E;&#x52A8;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x4F1A;&#x4E22;&#x5931;&#x81EA;&#x5DF1;&#x539F;&#x6765;&#x7684;&#x80FD;&#x529B;
     3&#x3001;&#x83B7;&#x53D6;&#x5230;&#x65B0;&#x7684;&#x80FD;&#x529B;&#xFF0C;&#x7C7B;&#x4F3C;&#x4E8E;&#x5757;&#x7EA7;&#x5143;&#x7D20;
     4&#x3001;&#x8131;&#x79BB;&#x6587;&#x6863;&#x6D41;
&#x5DE6;&#x6D6E;&#x52A8; : float:left;
&#x53F3;&#x6D6E;&#x52A8; : float:right;

&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#xFF1A;
    1&#x3001;&#x5728;&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x540E;&#x9762;&#x7D27;&#x8DDF;&#x4E00;&#x4E2A;&#x7A7A;div,&#x5E76;&#x7ED9;&#x8BE5;div&#x8BBE;&#x7F6E;clear:both(&#x5168;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;)
    &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
    .clear{clear:both;}
    2&#x3001;&#x7ED9;&#x7236;&#x5143;&#x7D20;&#x6DFB;&#x52A0;overflow:auto&#x5373;&#x53EF;(&#x9664;&#x4E86;ie6&#x8981;&#x7528;zoom:1,&#x5176;&#x4F59;&#x90FD;&#x652F;&#x6301;)
    .clear{overflow:auto;}
    3&#x3001;&#x4F7F;&#x7528;after&#x4F2A;&#x5BF9;&#x8C61;&#x6E05;&#x9664;&#x6D6E;&#x52A8;(&#x652F;&#x6301;IE8&#x4EE5;&#x4E0A;&#x6D4F;&#x89C8;&#x5668;,&#x4F46;IE8&#x53EA;&#x652F;&#x6301;&#x5355;&#x5192;&#x53F7;&#x5199;&#x6CD5;`:after`)
     .clear{zoom:1;}  &#x517C;&#x5BB9;IE6
     .clear:after{
                 content:&apos;&apos;;
                display:block;
                clear:both;
                }
</code></pre><h4 id="&#x5236;&#x4F5C;css&#x6C14;&#x6CE1;&#x5BF9;&#x8BDD;&#x6846;">&#x5236;&#x4F5C;css&#x6C14;&#x6CE1;&#x5BF9;&#x8BDD;&#x6846;</h4>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/reset.css&quot; /&gt;
    &lt;style&gt;
        .pao{
            width:200px;
            height: 200px;
            background: skyblue;
            border-radius: 4px;
            margin: 20px 40px;
            position: relative;
        }
        .pao:after {
            content: &apos;&apos;;
            position: absolute;
            left: -10px;
            bottom: 50px;
            width: 20px;
            height: 20px;
            border-width: 0;
            border-style: solid;
            border-color: transparent;
            border-top-width: 10px;
            border-top-color: skyblue;
            border-radius: 30px 0px 0 0;
            color: #dddddd;
}
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div class=&quot;pao&quot;&gt;

        &lt;/div&gt;
</code></pre><h4 id="&#x6BB5;&#x843D;">&#x6BB5;&#x843D;</h4>
<pre><code>    1&#x3001;text-align &#x63A7;&#x5236;&#x6587;&#x5B57;&#x6216;&#x884C;&#x5185;&#x5143;&#x7D20;&#x7684;&#x6C34;&#x5E73;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;
        text-align: left;
        text-align: right;
        text-align: center;
        text-align: justify; &#x4E24;&#x7AEF;&#x5BF9;&#x9F50;

    2&#x3001;letter-spacing : normal | 5px &#x6587;&#x5B57;&#x95F4;&#x8DDD;

    3&#x3001;text-overflow&#xFF1A;clip | ellipsis
        clip         &#x5F53;&#x5185;&#x8054;&#x5185;&#x5BB9;&#x6EA2;&#x51FA;&#x5757;&#x5BB9;&#x5668;&#x65F6;&#xFF0C;&#x5C06;&#x6EA2;&#x51FA;&#x90E8;&#x5206;&#x88C1;&#x5207;&#x6389;&#x3002; 
        ellipsis    &#x5F53;&#x5185;&#x8054;&#x5185;&#x5BB9;&#x6EA2;&#x51FA;&#x5757;&#x5BB9;&#x5668;&#x65F6;&#xFF0C;&#x5C06;&#x6EA2;&#x51FA;&#x90E8;&#x5206;&#x66FF;&#x6362;&#x4E3A;&#xFF08;...&#xFF09;&#x3002; 
        &#x4F8B;&#x5B50;1&#xFF1A;&#x5355;&#x884C;&#x6EA2;&#x51FA;
            div,input{
                overflow: hidden;    /*&#x6761;&#x4EF6;1&#xFF1A;&#x8D85;&#x51FA;&#x90E8;&#x5206;&#x9690;&#x85CF;*/
                white-space: nowrap;/*&#x6761;&#x4EF6;2&#xFF1A;&#x5F3A;&#x5236;&#x5728;&#x540C;&#x4E00;&#x884C;&#x5185;&#x663E;&#x793A;&#x6240;&#x6709;&#x6587;&#x672C;*/
                text-overflow: ellipsis;/*&#x8D85;&#x51FA;&#x90E8;&#x5206;&#x663E;&#x793A;&#x3002;&#x3002;&#x3002;*/
            }
        &#x4F8B;&#x5B50;2&#xFF1A;&#x591A;&#x884C;&#x6EA2;&#x51FA;
            div{
                overflow : hidden;    /*&#x6761;&#x4EF6;1&#xFF1A;&#x8D85;&#x51FA;&#x90E8;&#x5206;&#x9690;&#x85CF;*/
                text-overflow: ellipsis;/*&#x6761;&#x4EF6;2&#xFF1A;&#x8D85;&#x51FA;&#x90E8;&#x5206;&#x663E;&#x793A;&#x3002;&#x3002;&#x3002;*/
                display: -webkit-box;/*&#x6761;&#x4EF6;3&#xFF1A;&#x8BBE;&#x7F6E;&#x4E3A;&#x4F38;&#x7F29;&#x76D2;*/
                -webkit-line-clamp: 3;/*&#x8FD9;&#x662F;&#x8981;&#x663E;&#x793A;&#x7684;&#x884C;&#x6570;*/
                -webkit-box-orient: vertical;/*&#x8BBE;&#x7F6E;&#x6392;&#x7248;&#x65B9;&#x5411;&#x4E3A;&#x4ECE;&#x4E0A;&#x5230;&#x4E0B;*/
                font-size:16px;
                line-height: 20px;
                height: 60px;
                width: 100px;
            }


    4&#x3001;white-space:nowmal;     &#x7981;&#x6B62;&#x5185;&#x5BB9;&#x6362;&#x884C;

    5&#x3001;word-break: break-all;
    &#x53EF;&#x4EE5;&#x8BA9;&#x4E2D;&#x6587;&#x548C;&#x5355;&#x8BCD;&#x5728;&#x9047;&#x5230;&#x5BB9;&#x5668;&#x8FB9;&#x754C;&#x7684;&#x65F6;&#x5019;&#x81EA;&#x52A8;&#x6362;&#x884C;,&#x4F46;&#x5982;&#x679C;&#x8FDE;&#x7EED;&#x7684;&#x6570;&#x5B57;&#x548C;&#x5B57;&#x6BCD;,&#x5E76;&#x4E0D;&#x7B26;&#x5408;&#x8BE5;&#x89C4;&#x5219;&#x3002;
    &#x6240;&#x4EE5;&#xFF0C;&#x8FD9;&#x4E2A;&#x65F6;&#x5019;&#x5C31;&#x9700;&#x8981;&#x8FD9;&#x73A9;&#x610F;&#x51FA;&#x73B0;&#x4E86;&#xFF0C;&#x63A7;&#x5236;&#x975E;&#x4E2D;&#x6587;&#x5B57;&#x7B26;&#x9047;&#x5230;&#x8FB9;&#x754C;&#x7684;&#x65F6;&#x5019;&#x5F3A;&#x5236;&#x6362;&#x884C;
</code></pre><h4 id="&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;-&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;">&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D; &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</h4>
<pre><code>    &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF1A;relative
        1&#x3001;&#x76F8;&#x5BF9;&#x4E8E;&#x81EA;&#x5DF1;&#x539F;&#x59CB;&#x51FA;&#x751F;&#x70B9;&#x6765;&#x505A;&#x5BF9;&#x5E94;&#x7684;&#x504F;&#x79FB;
        2&#x3001;&#x5E76;&#x6CA1;&#x6709;&#x5B8C;&#x5168;&#x8131;&#x79BB;&#x6587;&#x6863;&#x6D41;(&#x663E;&#x793A;&#x662F;&#x4E00;&#x56DE;&#x4E8B;&#xFF0C;&#x4F46;&#x672C;&#x4F53;&#x6240;&#x5360;&#x7684;&#x4F4D;&#x7F6E;&#x548C;&#x9762;&#x79EF;&#x4F9D;&#x7136;&#x88AB;&#x4FDD;&#x7559;&#x4E0B;&#x6765;)
        3&#x3001;&#x6211;&#x4EEC;&#x901A;&#x5E38;&#x7528;&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x6765;&#x7BA1;&#x7740;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;
    &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF1A;&#x5FEB;&#x901F;&#x628A;&#x5143;&#x7D20;&#x5B9A;&#x4F4D;&#x4E8E;&#x7236;&#x5143;&#x7D20;&#x91CC;&#x7684;&#x67D0;&#x4E00;&#x4F4D;&#x7F6E; absolute 
        1&#x3001;&#x5B83;&#x662F;&#x57FA;&#x4E8E;body&#x6216;&#x662F;&#x5177;&#x6709;&#x5B9A;&#x4F4D;&#x4FE1;&#x606F;&#x7684;&#x7236;&#x5143;&#x7D20;&#x7684;&#x5DE6;&#x4E0A;&#x89D2;&#xFF0C;&#x6765;&#x505A;&#x5BF9;&#x5E94;&#x7684;&#x5B9A;&#x4F4D;&#xFF0C;&#x4ED6;&#x7684;&#x4F4D;&#x7F6E;&#x76F8;&#x5BF9;&#x4E8E;&#x7236;&#x4EB2;&#x6765;&#x8BF4;&#x662F;&#x56FA;&#x5B9A;&#xFF0C;&#x4E0D;&#x968F;&#x5468;&#x8FB9;&#x7684;&#x5E03;&#x5C40;&#x53D8;&#x5316;&#x800C;&#x53D8;&#x5316;
        2&#x3001;&#x4ED6;&#x4E5F;&#x662F;&#x8131;&#x79BB;&#x4E86;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x6240;&#x4EE5;&#x4E0D;&#x5360;&#x6B63;&#x5E38;&#x9875;&#x9762;&#x7684;&#x9762;&#x79EF;
    &#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;    fixed
        1&#x3001;&#x7279;&#x6B8A;&#x7248;&#x7684;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x53EA;&#x8BA4;&#x51C6;&#x7A97;&#x4F53;&#x5DE6;&#x4E0A;&#x89D2;&#xFF0C;&#x56FA;&#x5B9A;&#x5728;&#x6240;&#x8BBE;&#x7F6E;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x4F1A;&#x968F;&#x7740;&#x7A97;&#x4F53;&#x6EDA;&#x52A8;&#x800C;&#x4E00; 
        2&#x3001;&#x5176;&#x4F59;&#x7279;&#x6027;&#x8DDF;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x662F;&#x4E00;&#x6837;&#x7684;&#x3002;
</code></pre><h3 id="css3&#x52A8;&#x753B;">css3&#x52A8;&#x753B;</h3>
<pre><code>transition &#x8FC7;&#x6E21;
transition-delay&#x5EF6;&#x8FDF;&#x65F6;&#x95F4;
transform:    &#x65CB;&#x8F6C;rotate()   &#x6269;&#x7F29;scale()  &#x5E73;&#x79FB;translate(500px) &#x503E;&#x659C;skew(); 
rotateX &#x9762;&#x5411;&#x81EA;&#x5DF1;
rotateY &#x5F80;&#x53F3;&#x8F6C;
rotateZ &#x6574;&#x4F53;
transform-style: preserve-3d; 3D&#x6A21;&#x578B;

3D&#x6A21;&#x578B;&#xFF1A;
        .text{
            transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height: 200px;
            margin:200px 500px;
            animation: autoRotas 5s linear infinite ;
        }
        @keyframes autoRotas{
            to{
                transform: rotateY(360deg) rotateZ(360deg);
            }
        }
        .side{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.7;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }
        .front{
            background: red;
            transform: translateZ(100px);
        }
        .back{
            background: blue;
            transform:rotateY(180deg) translateZ(100px);
        }
        .left{
            background: yellow;
            transform:rotateY(-90deg) translateZ(100px);
        }
        .right{
            background: green;
            transform: rotateY(90deg) translateZ(100px);
        }
        .top{
            background: gray;
            transform:rotateX(90deg) translateZ(100px);
        }
        .bottom{
            background-color: #761C19;
            transform:rotateX(-90deg) translateZ(100px);
        }

        animation-name:trans ;/*&#x52A8;&#x753B;&#x540D;&#x79F0;*/
            animation-duration: 3s;/*&#x52A8;&#x753B;&#x65F6;&#x957F;*/
            animation-fill-mode: backwards;
            animation-direction: alternate-reverse;
            animation-iteration-count:infinite ;//&#x5FAA;&#x73AF;&#x6B21;&#x6570;
        }
        @keyframes trans{
            0%{
                opacity: 0;
                transform: scale(2) ;
            }
            30%{
                opacity: 0.5;
                transform: rotateX(180deg);
            }
            100%{
                opacity: 1;
                transform: scale(0.5) ;
            }
        }
</code></pre><h3 id="&#x79FB;&#x52A8;&#x7AEF;&#x5E03;&#x5C40;">&#x79FB;&#x52A8;&#x7AEF;&#x5E03;&#x5C40;</h3>
<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,
    initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot; /&gt;


    &#x5B9A;&#x5BBD;&#x5E03;&#x5C40;&#x4E3B;&#x8981;&#x7528;&#x4E8E;&#x56FE;&#x7247;&#x591A;&#xFF0C;&#x4E92;&#x52A8;&#x578B;&#x7F51;&#x7AD9;;web;APP; --width=980;
    &#x6D41;&#x5F0F;&#x5E03;&#x5C40;    --width=device-width;&#x4FDD;&#x8BC1;&#x5185;&#x5BB9;&#x6B63;&#x5E38;&#x5927;&#x5C0F;,&#x4E0D;&#x4F1A;&#x88AB;&#x7F29;&#x653E;;
    &#x6D41;&#x5F0F;&#x5E03;&#x5C40;&#x5229;&#x7528;&#x4E86;&#x6D6E;&#x52A8;&#x7684;&#x7279;&#x70B9;,&#x5728;&#x540C;&#x4E00;&#x884C;&#x82E5;&#x8FD8;&#x6709;&#x7A7A;&#x4F4D;&#x5219;&#x4F1A;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;,&#x4F4D;&#x7F6E;&#x4E0D;&#x8DB3;&#x7684;&#x8BDD;&#x5C31;&#x4F1A;&#x7D27;&#x8DDF;&#x5728;&#x4E0B;&#x4E00;&#x884C;&#x6392;&#x5217;.
    &#x4E5F;&#x5C31;&#x662F;&#x8BF4;,&#x5728;&#x5C0F;&#x578B;&#x8BBE;&#x5907;(&#x5C0F;&#x578B;&#x624B;&#x673A;&#x5982;&#xFF1A;ip4&#x3001;ip5&#x3001;ip6)&#x548C;&#x4E2D;&#x578B;&#x8BBE;&#x5907;(ip6P)&#x6709;&#x5F88;&#x597D;&#x7684;&#x9002;&#x5E94;&#x6027;&#x3002;


    &#x4E3A;&#x4EC0;&#x4E48;&#x8BBE;&#x8BA1;&#x56FE;&#x5C3A;&#x5BF8;&#x8981;&#x7EDF;&#x4E00;&#x4E3A;750*1334?
    1&#x3001;iphone&#x4E3A;&#x5F53;&#x4EE3;&#x6D41;&#x884C;&#x673A;&#x578B;
    2&#x3001;&#x4F7F;&#x56FE;&#x7247;&#x5927;&#x5C0F;&#x9002;&#x4E2D;&#xFF0C;&#x907F;&#x514D;&#x56FE;&#x7247;&#x5931;&#x5E27;&#x7387;&#x592A;&#x5927;
</code></pre><h3 id="inlineblock&#x884C;&#x5185;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5751;&#x70B9;">inline-block&#x884C;&#x5185;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5751;&#x70B9;</h3>
<pre><code>1&#x3001;&#x591A;&#x4E2A;&#x8FDE;&#x7EED;&#x7684;&#x884C;&#x5185;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4E4B;&#x95F4;&#x4F1A;&#x6709;&#x7A7A;&#x9699;,&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#x6587;&#x5B57;&#x4E4B;&#x95F4;&#x7684;&#x6362;&#x884C;&#x5BFC;&#x81F4;&#x7684;&#xFF0C;&#x9700;&#x8BBE;&#x7F6E;font-size:0;
2&#x3001;&#x82E5;&#x884C;&#x5185;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x9AD8;&#x5EA6;&#x4E0D;&#x7EDF;&#x4E00;,&#x6240;&#x6709;&#x5143;&#x7D20;&#x4F1A;&#x5728;height&#x6700;&#x5927;&#x7684;&#x6C34;&#x5E73;&#x57FA;&#x7EBF;&#x4E0A;&#x663E;&#x793A;;&#x9700;&#x8BBE;&#x7F6E;vertical-align:top;
3&#x3001;&#x5982;&#x679C;&#x60F3;&#x8BA9;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x7684;&#x884C;&#x5185;&#x5757;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x5BF9;&#x9F50;,&#x9700;&#x8981;&#x5728;&#x591A;&#x4E2A;&#x884C;&#x5185;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x7238;&#x7238;&#x8BBE;&#x7F6E;&#x4E00;&#x4E2A;&#x884C;&#x9AD8;(&#x5982;&#x679C;&#x9700;&#x8981;),&#x7136;&#x540E;&#x8FD9;&#x51E0;&#x4E2A;&#x884C;&#x5185;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;vertical-align&#x5C5E;&#x6027;;
    *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                font-size: 0;
            }
            .left{
                display: inline-block;
                width: 40%;
                height: 100px;
                background: skyblue;
            }
            .right{
                display: inline-block;
                width: 60%;
                height: 100px;
                background: red;
            }
</code></pre><h3 id="scss&#x7684;&#x4F7F;&#x7528;">SCSS&#x7684;&#x4F7F;&#x7528;</h3>
<h6 id="1&#x3001;&#x628A;scss&#x6587;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A;css&#x6587;&#x4EF6;">1&#x3001;&#x628A;scss&#x6587;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A;css&#x6587;&#x4EF6;</h6>
<pre><code>    scss scss/index.scss css/index.css
</code></pre><h6 id="2&#x3001;&#x5B9E;&#x65F6;&#x76D1;&#x6D4B;&#x4FEE;&#x6539;">2&#x3001;&#x5B9E;&#x65F6;&#x76D1;&#x6D4B;&#x4FEE;&#x6539;</h6>
<pre><code>    scss --watch scss:css
</code></pre><h6 id="3&#x3001;&#x9009;&#x62E9;&#x751F;&#x6210;&#x7684;&#x98CE;&#x683C;">3&#x3001;&#x9009;&#x62E9;&#x751F;&#x6210;&#x7684;&#x98CE;&#x683C;</h6>
<pre><code>       * nested&#xFF1A;&#x5D4C;&#x5957;&#x7F29;&#x8FDB;&#x7684;css&#x4EE3;&#x7801;&#xFF0C;&#x5B83;&#x662F;&#x9ED8;&#x8BA4;&#x503C;&#x3002;
    &#x3000;&#x3000; * expanded&#xFF1A;&#x6CA1;&#x6709;&#x7F29;&#x8FDB;&#x7684;&#x3001;&#x6269;&#x5C55;&#x7684;css&#x4EE3;&#x7801;&#x3002;
    &#x3000;&#x3000; * compact&#xFF1A;&#x7B80;&#x6D01;&#x683C;&#x5F0F;&#x7684;css&#x4EE3;&#x7801;&#x3002;
    &#x3000; &#x3000;* compressed&#xFF1A;&#x538B;&#x7F29;&#x540E;&#x7684;css&#x4EE3;&#x7801;&#x3002;

        &#x4F8B;&#x5982;&#xFF1A;scss&#x6587;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A;&#x538B;&#x7F29;&#x540E;&#x7684;css&#x6587;&#x4EF6;&#xFF1A;

            scss scss/index.scss css/index.css  --style compressed

        &#x4F8B;&#x5982;&#xFF1A;&#x5B9E;&#x65F6;&#x76D1;&#x6D4B;&#x5E76;&#x8F6C;&#x6362;&#x4E3A;&#x538B;&#x7F29;&#x540E;&#x7684;css&#x6587;&#x4EF6;&#xFF1A;

            scss scss/index.scss css/index.css --style compressed
</code></pre><h6 id="4&#x3001;scss&#x6587;&#x4EF6;&#x91CC;&#x5C01;&#x88C5;-&#x6839;&#x636E;&#x4E0D;&#x540C;&#x50CF;&#x7D20;&#x8F6C;&#x6362;&#x4E3A;&#x4E0D;&#x540C;rem&#x503C;&#x7684;&#x51FD;&#x6570;">4&#x3001;scss&#x6587;&#x4EF6;&#x91CC;&#x5C01;&#x88C5; &#x6839;&#x636E;&#x4E0D;&#x540C;&#x50CF;&#x7D20;&#x8F6C;&#x6362;&#x4E3A;&#x4E0D;&#x540C;rem&#x503C;&#x7684;&#x51FD;&#x6570;</h6>
<pre><code>    $fontsize:40;
    @function r($px){
        @return $px/(2*$fontsize) * 1rem;
    }
</code></pre><h3 id="&#x79FB;&#x52A8;&#x7AEF;-rem&#x5E03;&#x5C40;">&#x79FB;&#x52A8;&#x7AEF; rem&#x5E03;&#x5C40;</h3>
<h6 id="&#x5F15;&#x5165;&#x6839;&#x636E;&#x4E0D;&#x540C;&#x8BBE;&#x5907;&#x6539;&#x53D8;body&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x7684;&#x811A;&#x672C;">&#x5F15;&#x5165;&#x6839;&#x636E;&#x4E0D;&#x540C;&#x8BBE;&#x5907;&#x6539;&#x53D8;body&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x7684;&#x811A;&#x672C;</h6>
<pre><code>     document.body.style.height=window.innerHeight+&apos;px&apos;;
    function recalc() {
        var clientWidth = document.documentElement.clientWidth;
        if(!clientWidth) return;
        document.documentElement.style.fontSize = 40 * (clientWidth / 750) + &apos;px&apos;;
    }
    function initRecalc() {
        recalc();
        var resizeEvt = &apos;osrientationchange&apos; in window ? &apos;orientationchange&apos; : &apos;resize&apos;;
        if(!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener(&apos;DOMContentLoaded&apos;, recalc, false);
    }
    initRecalc();
</code></pre><h3 id="&#x54CD;&#x5E94;&#x5F0F;&#x5E03;&#x5C40;">&#x54CD;&#x5E94;&#x5F0F;&#x5E03;&#x5C40;</h3>
<h6 id="bootstrap&#x7684;&#x4F7F;&#x7528;-&#x5B98;&#x7F51;httpwwwbootcsscom">BootStrap&#x7684;&#x4F7F;&#x7528; <a href="http://www.bootcss.com/" target="_blank">&#x5B98;&#x7F51;http://www.bootcss.com/</a></h6>
<pre><code>    &#x6805;&#x683C;&#x5316;&#x7CFB;&#x7EDF;
        col-xs-? &#x8D85;&#x5C0F;&#x578B;&#x8BBE;&#x5907;      &#xFF08;max-width&#xFF1A;767px&#xFF09;
        col-sm-? &#x5C0F;&#x578B;&#x8BBE;&#x5907;           &#xFF08;min-width&#xFF1A;768px&#xFF09; (max-width:991px)
        col-md-? &#x4E2D;&#x578B;&#x8BBE;&#x5907;          &#xFF08;min-width&#xFF1A;992px&#xFF09;  (max-width:1199px)
        col-lg-? &#x5927;&#x578B;&#x8BBE;&#x5907;         &#xFF08;min-width&#xFF1A;1200px&#xFF09;
</code></pre><h6 id="&#x5A92;&#x4F53;&#x67E5;&#x8BE2;-&#x4E0D;&#x540C;&#x8BBE;&#x5907;&#x5C4F;&#x5E55;&#x5BBD;&#x5EA6;&#x4E0B;&#x5F15;&#x7528;&#x4E0D;&#x540C;&#x6837;&#x5F0F;">&#x5A92;&#x4F53;&#x67E5;&#x8BE2; (&#x4E0D;&#x540C;&#x8BBE;&#x5907;&#x5C4F;&#x5E55;&#x5BBD;&#x5EA6;&#x4E0B;&#x5F15;&#x7528;&#x4E0D;&#x540C;&#x6837;&#x5F0F;)</h6>
<pre><code>    css&#x6837;&#x5F0F;&#x91CC;: @meida screen and (max-width:767px){
            ...
    }
    html&#x9875;&#x5185;&#x5F15;&#x5165;: 
            &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;**.css&quot; media=&quot;screen and (max-width:767px)&quot;/&gt;
</code></pre><h5 id="&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x5E03;&#x5C40;">&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x5E03;&#x5C40;</h5>
<h6 id="&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x5F39;&#x6027;&#x76D2;&#x5B50;-">&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x5F39;&#x6027;&#x76D2;&#x5B50; :</h6>
<blockquote>
<pre><code>display: -webkit-flex; 
  display: flex; 
</code></pre></blockquote>
<p></p><h6 id="&#x6CE8;&#x610F;">&#x6CE8;&#x610F;:</h6><p></p>
<blockquote>
<pre><code>    CSS3&#x7684;Columns&#x5C5E;&#x6027;&#x5BF9;&#x5F39;&#x6027;&#x5BB9;&#x5668;&#x662F;&#x6CA1;&#x6709;&#x5F71;&#x54CD;&#x7684;&#xFF08;&#x6CE8;&#xFF1A;CSS3&#x7684;Columns&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x53C2;&#x89C1;&#x8FD9;&#x91CC;)
    float, clear &#x548C; vertical-align &#x5BF9;&#x5F39;&#x6027;&#x9879;&#x76EE;&#x5757;&#x6CA1;&#x6709;&#x5F71;&#x54CD;&#x3002;
    &#x5982;&#x679C;&#x5143;&#x7D20;display&#x7684;&#x503C;&#x6307;&#x5B9A;&#x4E3A;inline-flex&#xFF0C;&#x800C;&#x4E14;&#x5143;&#x7D20;&#x662F;&#x4E00;&#x4E2A;&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x6216;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#xFF0C;&#x5219;display&#x7684;&#x8BA1;&#x7B97;&#x503C;&#x662F;flex&#x3002;
</code></pre></blockquote>
<pre><code>flex-grow &#x81EA;&#x52A8;&#x5206;&#x914D;&#x7236;&#x4EB2;&#x5269;&#x4F59;&#x5BBD;&#x5EA6; &#x589E;&#x52A0;
flex-shrink &#x81EA;&#x52A8;&#x5206;&#x914D;&#x7236;&#x4EB2;&#x5269;&#x4F59;&#x5BBD;&#x5EA6; &#x51CF;&#x5C11;

/
    align-items:flex-start &#x7F6E;&#x9876;| flex-end &#x7F6E;&#x5E95;| center &#x5782;&#x76F4;&#x5C45;&#x4E2D;|
                baseline &#x9879;&#x76EE;&#x7684;&#x7B2C;&#x4E00;&#x884C;&#x6587;&#x5B57;&#x7684;&#x57FA;&#x7EBF;&#x5BF9;&#x9F50;
                | stretch &#x5982;&#x679C;&#x9879;&#x76EE;&#x672A;&#x8BBE;&#x7F6E;&#x9AD8;&#x5EA6;&#x6216;&#x8BBE;&#x4E3A;auto&#xFF0C;&#x5C06;&#x5360;&#x6EE1;&#x6574;&#x4E2A;&#x5BB9;&#x5668;&#x7684;&#x9AD8;&#x5EA6;&#x3002;(&#x6CE8;&#x610F;:&#x5982;&#x679C;&#x8BBE;&#x7F6E;&#x4E86;min/max-width/height&#x7B49;&#x5C5E;&#x6027;&#x7684;&#x524D;&#x63D0;&#x4E0B;,&#x4F1A;&#x5C3D;&#x53EF;&#x80FD;&#x63A5;&#x8FD1;&#x6240;&#x8BBE;&#x7F6E;&#x7684;&#x5C3A;&#x5BF8;&#x3002;;
    &#x6C34;&#x5E73;&#x65B9;&#x5411; justify-content: flex-start &#x5DE6;&#x5BF9;&#x9F50;| flex-end &#x53F3;&#x5BF9;&#x9F50;|
                            center &#x5C45;&#x4E2D;| space-between &#x4E24;&#x7AEF;&#x5BF9;&#x9F50;&#xFF0C;&#x9879;&#x76EE;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;&#x90FD;&#x76F8;&#x7B49;| 
                            space-around &#x5F39;&#x6027;&#x76D2;&#x5B50;&#x5143;&#x7D20;&#x4F1A;&#x5E73;&#x5747;&#x5730;&#x5206;&#x5E03;&#x5728;&#x884C;&#x91CC;;
/    

flex-direction: row | row-reverse | column | column-reverse;
    row(&#x9ED8;&#x8BA4;&#x503C;):&#x4E3B;&#x8F74;&#x4E3A;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#xFF0C;&#x8D77;&#x70B9;&#x5728;&#x5DE6;&#x7AEF;&#x3002;
    row-reverse:&#x4E3B;&#x8F74;&#x4E3A;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#xFF0C;&#x8D77;&#x70B9;&#x5728;&#x53F3;&#x7AEF;&#x3002;
    column:&#x4E3B;&#x8F74;&#x4E3A;&#x5782;&#x76F4;&#x65B9;&#x5411;&#xFF0C;&#x8D77;&#x70B9;&#x5728;&#x4E0A;&#x6CBF;&#x3002;
    column-reverse:&#x4E3B;&#x8F74;&#x4E3A;&#x5782;&#x76F4;&#x65B9;&#x5411;&#xFF0C;&#x8D77;&#x70B9;&#x5728;&#x4E0B;&#x6CBF;&#x3002;
/
flex-wrap:  nowrap &#x5355;&#x884C;&#x663E;&#x793A;&#x4E0D;&#x6362;&#x884C; | wrap&#x591A;&#x884C;&#x663E;&#x793A; | wrap-reverse &#x591A;&#x884C;&#x663E;&#x793A;&#xFF0C;&#x7B2C;&#x4E00;&#x884C;&#x5728;&#x4E0B;&#x65B9;;
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="./html.html" class="navigation navigation-prev " aria-label="Previous page: HTMl5"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="./JS.html" class="navigation navigation-next " aria-label="Next page: JavaScript"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="gitbook/app.js"></script>

    
    <script src="gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"toggle-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        <!-- body:end -->
    </body>
    <!-- End of book Introduction -->
</html>
